<template>
	<view class="filter-box">
		
		<view class="navbar">
		
			<view class="nav-item y-f" :class="{ current: filterIndex === 1 }" @tap="tabClick(1)">
				<view class="img-found">
					<image src="../static/images/icon_found.png" mode=""></image>
				</view>
				<view class="title-box x-f"><text class="filter-title">搜索</text></view>
			</view>
			
			<view class="nav-item y-f" :class="{ current: filterIndex === 0 }" @tap="tabClick(0)">
				<text class="filter-title">筛选</text>
				<view class="img-box">
					<image src="../static/images/icon_arrow_down.png" mode=""></image>
				</view>
				
			</view>
			
			
			<view class="nav-item y-f" :class="{ current: filterIndex === 3 }" @tap="tabClick(3)">
				<view class="title-box">
					<text class="filter-title">排序</text>
				</view>
				<view class="img-box">
					<image src="../static/images/icon_arrow_down.png" mode=""></image>
				</view>
				<view class="sel-box" v-show="showSel">
					<view class="sel-item" @tap="onSel(0)" :class="{ 'sel-active': defaultOrder === 0 && filterIndex === 0 }">综合推荐</view>
					<view class="sel-item" @tap="onSel(1)" :class="{ 'sel-active': defaultOrder === 1 && filterIndex === 0 }">扩展自定义排序</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"mix-sort-bar",
		data() {
			return {
				filterIndex: 0,
				showSel: false, //综合选择
				defaultOrder: 0, //综合
				priceOrder: 0, //价格
				salesOrder: 0, //销量
				newProdcutOrder: 0 //新品优先
			};
		},
		computed: {
			filterData() {
				const data = {
					defaultOrder: this.defaultOrder,
					priceOrder: this.priceOrder,
					salesOrder: this.salesOrder,
					newProdcutOrder: this.newProdcutOrder
				};
				return data;
			}
		},
		onLoad() {},
		methods: {
			//筛选
			tabClick(index) {
				console.log(index,'``````````')
				this.filterIndex = index;
				if (index === 0) {
					this.showSel = !this.showSel;
				} else {
					this.showSel = false;
				}
				if (index === 1) {
					this.salesOrder = 1;
				} else {
					this.salesOrder = 0;
				}
		
				if (index === 3) {
					this.showSel = true;
				} else {
					this.showSel = false;
				}
				
			},
			onSel(dot) {
				this.defaultOrder = dot;
				this.showSel = false;
			},
			hideModal() {
				this.showSel = false;
			}
		}
	}
</script>

<style lang="scss">
.sel-box {
	position: absolute;
	width: 230rpx;
	min-height: 270rpx;
	background: #FFFFFF;
	border-radius: 1px;
	box-shadow: 1px 3px 3px 0px 
			rgba(0, 0, 0, 0.2);
	z-index: 999;
	left: 50%;
	transform: translateX(-50%);
	top: 82rpx;
	transition: all ease-out 0.2s;
	z-index: 999;
	.sel-item {
		color: #333;
		padding: 20rpx 40rpx 0;
		font-size: 24rpx;
		font-weight: 500;
	}
	.sel-active {
		color: #d5a65a;
		font-size: 26rpx;
		font-weight: 600;
	}
}
.filter-box {
	width: 750rpx;
}

.cu-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1110;
    opacity: 0;
    outline: 0;
    text-align: center;
    -ms-transform: scale(1.185);
    -webkit-transform: scale(1.185);
    transform: scale(1.185);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    background: rgba(0, 0, 0, 0.6);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    pointer-events: none;
}
.show {
    opacity: 1;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
}
.navbar {
	display: flex;
	width: 750rpx;
	height: 80rpx;
	background: #fff;
	border-bottom: 1upx solid #e6e6e6;
	border-top: 1upx solid #e6e6e6;
	position: relative;
	z-index: 999;
	.nav-item {
		height: 80rpx;
		font-family: AlibabaPuHuiTi-Regular;
		font-weight: normal;
		font-size: 26rpx;
		color: #808080;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		position: relative;
		.filter-title {
			color: #808080;
		}
		.img-box{
			width: 14rpx;
			height: 8rpx;
			margin-left: 8rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.img-found{
			width: 26rpx;
			height: 26rpx;
			margin-right: 8rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.line {
			width: 110rpx;
			height: 4rpx;
			background: transparent;
			position: absolute;
			bottom: 0;
			z-index: 2;
		}

		.line-active {
			background: rgba(213, 166, 90, 1);
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30rpx;
				line-height: 1;
				height: 14rpx;
				margin-left: 6upx;
				font-size: 22upx;
				font-weight: 600;
				color: #c4c4c4;
				padding: 0rpx 4rpx;
			}

			.xia {
				transform: scaleY(-1);
			}
		}
	}
}

.current {
	color: #d5a65a;
}
.active {
	color: #d5a65a !important;
}
</style>
